<template>
  <el-card class="orderProcess" shadow="hover">
    <el-steps :active="active" align-center>
      <el-step title="提交订单" icon="el-icon-s-order"></el-step>
      <el-step title="确认支付" icon="el-icon-bank-card"></el-step>
      <el-step title="完成购买" icon="el-icon-success"></el-step>
    </el-steps>
    <br><br><br>
    <h2>
      <svg-icon icon-class="number1" style="font-size: 28px;" />{{"\xa0\xa0"}}出行人信息(用于安排出行人行程)
    </h2>
    <el-form >
      
       
          <template>
            <h3>出行人</h3>
            <el-row>
              <el-col :span="8">
                <el-input v-model="persons.customerName" placeholder="中文姓名"></el-input>
                <el-input v-model="persons.customerTelphone" placeholder="境内手机号" style="margin-top:20px"></el-input>
              </el-col>
            </el-row>
            <el-col :span="6">
              <el-select v-model="persons.customerNationality" placeholder="国籍" style="margin-top:20px">
                <el-option label="中国" value="中国"></el-option>
                <el-option label="俄罗斯" value="俄罗斯"></el-option>
                <el-option label="乌克兰" value="乌克兰"></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-input v-model="persons.customerId" placeholder="身份证号码" style="margin-top:20px"></el-input>
            </el-col>
          </template>
       <br><br><br><br>
      <h2>
        <svg-icon icon-class="number2" style="font-size: 28px;" />{{"\xa0\xa0"}}预约人信息
      </h2>
      <br><br>
        <el-input v-model="book.bookName" placeholder="姓名" style="width:340px"></el-input><br><br>
        <el-input v-model="book.bookTel" placeholder="境内手机号" style="width:340px"></el-input>
    </el-form>
    <br><br>
    <el-divider ></el-divider>
    <el-row>
      <el-col :span="23" style="text-align:right">
        <b>支付总金额：</b>{{"\xa0\xa0\xa0\xa0\xa0"}}
        <font style="font-size:30px;color:orange">￥</font>
        <font style="font-size:50px;color:orange">{{price}}</font>
      </el-col>
    </el-row>
    <br>
    <el-divider ></el-divider>
    <el-row>
      <el-col :span="23" style="text-align:right">
       <el-button type="warning" plain @click="next">订单提交</el-button>
      </el-col>
    </el-row>
    
  </el-card>

</template>



<script>
  import {
    findById
  } from "@/api/user";
  import {updateBook} from "@/api/order";
  import {addInFo} from "@/api/order";



  export default {
    data() {

      return {
        active:0,
        num: '',
        persons: {
          orderId:0,
          customerName: '',
          customerId: '',
          customerTelphone: '',
          customerNationality: ''
          },
        book: {
          orderId: 0,
          bookName: '',
          bookTel: '',
        },
        price:'',
        groupId:'',
        userId:'',
        
      };
    },

    created() {
      this.userId = this.$store.getters.userId;
      this.book.orderId = this.$route.query.orderId;
      this.persons.orderId = this.$route.query.orderId;
      this.price = this.$route.query.price;
      
    },

    methods: {
      next() {
        updateBook(this.book).then(res => {
          console.log(res);

        }),
        addInFo(this.persons).then(res => {
          console.log(res);
        }),
        this.$router.push({
          name:'OrderProcess2',
          query:{
            orderId: this.book.orderId,
            price: this.price
          }
        })
      },
     
    },

  };

</script>

<style scoped>
  .orderProcess {
    width: 80%;
    border: solid rgb(174, 236, 221) 1px;
    border-radius: 4px;
    /* height: 15em; */
    margin-top: 40px;
    margin-left: 100px;
  }

  el-input {
    width: 200px;
  }

</style>
